// eslint-disable-next-line no-unused-vars
import React, {useState} from 'react';

import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { injected, metaMask, safe, walletConnect } from 'wagmi/connectors'
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Connector, useConnect } from 'wagmi'

const projectId = '<WALLETCONNECT_PROJECT_ID>'

// 2. Set up a React Query client.
const queryClient = new QueryClient()

// 创建 wagmi 配置
const config = createConfig({
    chains: [mainnet, sepolia],
    connectors: [
        injected(),
        walletConnect({ projectId }),
        metaMask(),
        safe(),
    ],
    transports: {
        [mainnet.id]: http(),
        [sepolia.id]: http(),
    },
})

function App() {
    return (
        <WagmiProvider  config={config}>
            <QueryClientProvider client={queryClient}>
                <div>
                    <h1>My DApp</h1>
                    <ModernInputWithButtons/>
                </div>
            </QueryClientProvider>
        </WagmiProvider>
    );
}

const ModernInputWithButtons = () => {
    const [isFocused, setIsFocused] = useState(false);

    const inputStyle = {
        width: '100%',
        padding: '10px 15px',
        fontSize: '16px',
        border: `1px solid ${isFocused ? '#4CAF50' : '#ccc'}`,
        borderRadius: '25px',
        outline: 'none',
        backgroundColor: '#f9f9f9',
        color: '#333',
        boxShadow: isFocused ? '0 2px 8px rgba(0, 0, 0, 0.2)' : '0 2px 4px rgba(0, 0, 0, 0.1)',
        transition: 'border-color 0.3s, box-shadow 0.3s',
    };

    const buttonStyle = {
        width: '100%',
        padding: '10px 0',
        fontSize: '16px',
        color: '#fff',
        borderRadius: '25px',
        border: 'none',
        cursor: 'pointer',
        marginTop: '10px',
        transition: 'background-color 0.3s, box-shadow 0.3s',
    };

    const buttonPrimaryStyle = {
        ...buttonStyle,
        backgroundColor: '#4CAF50',
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
    };

    const buttonSecondaryStyle = {
        ...buttonStyle,
        backgroundColor: '#008CBA',
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
    };

    return (
        <div style={{width: '250px', margin: 'auto'}}>
            <input
                type="text"
                placeholder="0.0"
                style={inputStyle}
                onFocus={() => setIsFocused(true)}
                onBlur={() => setIsFocused(false)}
            />
            <button style={buttonPrimaryStyle}>
                Connect Metamask
            </button>
            <button style={buttonSecondaryStyle}>
                Transfer
            </button>
        </div>
    );
};

export default App;


